<template>
	<view class="h-full">
		<scroll-view
			scroll-y
			class="list scrollbar-none"
			@scrolltolower="scrolltolower"
		>
			<view
				class="item"
				v-for="i in list"
				:key="i.id"
				@click="gotoDetail(i)"
				v-if="list.length > 0"
			>
				<view class="item-top">
					<view class="item-line">
						<text class="greyColor label">申请时间：</text>
						<text class="text">{{ i.applyTime }}</text>
					</view>
					<text
						:style="{
							color: getStatusColor(
								getLabel(AppointmentStatusEnum, i.reversionStatus),
							),
						}"
						>{{ getLabel(AppointmentStatusEnum, i.reversionStatus) }}</text
					>
				</view>
				<view class="item-content">
					<view class="item-line">
						<text class="greyColor label">参观时间：</text>
						<text class="text">{{
							formatVisitTime(i.visitDate, i.visitTime)
						}}</text>
					</view>
					<view class="item-line">
						<text class="greyColor label">参观人数：</text>
						<text class="text">{{ i.outConnectJson?.length }}人</text>
					</view>
				</view>
				<view class="item-button">
					<van-button
						type="primary"
						size="small"
						@click.stop="remoke(i)"
						v-if="i.buttonList.indexOf('REVOKE') >= 0"
						class="button"
					>
						取消预约
					</van-button>
					<van-button
						type="primary"
						size="small"
						@click.stop="reappointment(i)"
						v-if="i.buttonList.indexOf('RE_RESERVATION') >= 0"
						class="button"
					>
						重新预约
					</van-button>
				</view>
			</view>
			<van-empty description="暂无数据" v-else />
		</scroll-view>
	</view>
</template>
<script setup>
import { Iphone } from "@element-plus/icons-vue";
import { dialNumber } from "@/utils";
import { getReservationPageApi } from "@/api";
import { getLabel, getStatusColor, formatVisitTime } from "@/utils";
const useDict = useDictStore();
// 获取状态枚举
const AppointmentStatusEnum = useDict.getData("RESERVATION_STATUS");

const prop = defineProps({
	// 查询状态
	tabValue: {
		type: String,
		default: "",
	},
	// 查询状态
	location: {
		type: String,
		default: "",
	},
});

// 分页
const current = ref(1);
const size = ref(10);
const total = ref(0);

const emit = defineEmits(["detail", "remoke"]);

// 列表
const list = ref([]);

// 详情
const gotoDetail = (data) => {
	uni.navigateTo({
		url:
			"/packages/booking/detail/appointmentDetails/index?id=" +
			data.id +
			"&buttonList=" +
			data.buttonList,
	});
};

// 重新预约
const reappointment = (data) => {
	uni.navigateTo({
		url:
			"/pages/booking/socialUsersBooking/reappointment?id=" +
			data.id +
			"&type=reappointment",
	});
};

// 取消预约
const remoke = (data) => {
	emit("remoke", data);
};

// 下拉
const scrolltolower = async () => {
	if (current.value >= total.value / size.value) {
	} else {
		current.value++;
		await loadData();
	}
};

// 获取数据
const loadData = async (type) => {
	if (type) {
		current.value = 1;
	}
	const { data } = await getReservationPageApi({
		current: current.value,
		size: size.value,
		statusFlag_ignore: prop.tabValue,
		location_ignore: prop.location,
	});
	if (!type) {
		list.value = list.value.concat(data.records);
	} else {
		list.value = data.records;
	}
	total.value = data.total;
};
onShow(() => {
	loadData(1);
});
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	loadData,
});
</script>
<style lang="scss" scoped>
@import "../../index.scss";
</style>
